<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        * {margin: 0; padding: 0;}
        .w {
            width: 1200px;
            margin: 0 auto;
        }
        header {
            height: 100px;
            background-color: #bfa;
        }
        nav {
            height: 70px;
            background-color: tomato;
        }
        main {
            border: 1px solid red;
        }
        /* 没有副作用开启BFC */
        /* main { */
            /* display: flow-root; */
            /* overflow: hidden; */
        /* } */
        section {
            float: left;
            height: 600px;
            width: 700px;
            background-color: skyblue;
            /* 很好用的属性, 有效减少开发过程中繁琐的内边距计算 */
            box-sizing: border-box;
            padding: 10px;
        }

        aside {
            float: right;
            width: 500px;
            height: 600px;
            background-color: orange;
        }

        footer {
            height: 400px;
            background-color: gainsboro;
        }

        /* 通过容器内两边伪元素, 清除浮动清除浮动的副作用 */
        .clearfix::before,
        .clearfix::after {
            content: '';
            /* table 格式, 可以有效防止父子元素外边距折叠问题 */
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
<!--相对, 绝对, 固定, 粘滞定位-->
<!--使用定位的小技巧, 版心, 提示信息-->
<header></header>
<nav class="w"></nav>
<main class="w clearfix">
    <section>
        <article>abc</article>
    </section>
    <aside></aside>
</main>
<footer></footer>
</body>
</html>